<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>光谱文件</title>
    <%-- 全站样式 --%>
    <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>

    <!--光谱文件css-->
    <link rel="stylesheet" href="assets/css/folder/file.css">

    <!--Datatables所需要的js和css文件-->
    <script type="text/javascript" src="assets/css/dataTables.bootstrap.css"></script>
    <script type="text/javascript" src="assets/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="assets/js/dataTables.bootstrap.js"></script>

    <!--右击菜单js-->
    <script type="text/javascript" src="assets/js/BootstrapMenu.min.js"></script>


</head>
<body>
<div class="page-container">
    <%--侧边栏 --%>
    <jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>

    <div class="main-content">
        <%--导航栏 --%>
        <jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>

        <section class="gallery-env">
            <div class="row">
                <!-- Gallery Album Optipns and Images -->
                <div class="col-sm-12 mailbox-right">
                    <!-- Album Header -->
                    <div class="album-header">
                        <div class="row">
                            <div class="col-sm-12">
                                <h2>光谱文件</h2>
                                <ul class="album-options list-unstyled list-inline">
                                    <li>
                                        <i class=""></i><a href="listAllSpectrumDir.do"
                                                           class="fa-reply fontstyle">返回上一级</a>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-default buttonself1 upload1"
                                                data-toggle="modal" data-target="#uploadmodal">
                                            <i class="fa-upload fontstyle"></i>导入标准库
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-default buttonself1 download1">
                                            <i class="fa-download fontstyle" id="downloadSpectrum"></i>下载
                                        </button>
                                    </li>
                                    <li>
                                        <div class="buttonself1 delete1">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- DataTables -->
                    <section class="mailbox-env">
                        <div class="mail-env">
                            <!--第二步：添加如下 HTML 代码-->
                            <div class="album-header" style="margin-left:20px;width:95%; ">
                                    <table id="example1" class="table table-striped table-bordered" style="width: 95%" cellspacing="0" >

                                    <thead>
                                    <tr>
                                        <th class="no-sorting">
                                           光谱编号
                                        </th>
                                        <th>光谱名称</th>
                                        <th>光谱类别</th>
                                        <th>被检测物产地</th>
                                        <th>上传时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:choose>
                                        <c:when test="${status.equals('0')}">
                                            <tr class="tabletr">
                                                <td>
                                                    <span style="color:red;">${isempty}</span>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </c:when>
                                        <c:otherwise>
                                            <c:forEach var="spectrumInfo" items="${spectrumdatas}">
                                                <tr class="tabletr">
                                                    <td>
                                                        <input type="hidden" class="spectrumID" value="${spectrumInfo.Id}" />
                                                            ${spectrumInfo.Id}
                                                    </td>
                                                    <td>${spectrumInfo.spectrumName}</td>
                                                    <td>${spectrumInfo.spectrumType}</td>
                                                    <td>${spectrumInfo.categoryOrigin}</td>
                                                    <td>${spectrumInfo.saveTime}</td>
                                                </tr>
                                            </c:forEach>
                                        </c:otherwise>
                                    </c:choose>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>

            </div>
        </section>

        <%--页脚 --%>
        <jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
    </div>
</div>


    <!-- 模态框（Modal） -->
    <!--上传文件开始-->
    <div class="modal fade" id="uploadmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">上传光谱到标准库</h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">请填写信息</h3>
                        </div>
                        <div class="panel-body">
                            <form action="/upload/standardSpectrum.do" role="form" class="form-horizontal" method="post" enctype="multipart/form-data">
                                <div class="form-group-separator"></div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">选择光谱 <font color="red">*</font></label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="spectrumId" id="pluginType" required>
                                          <c:choose>
                                              <c:when test="${status.equals('0')}"></c:when>
                                              <c:otherwise>
                                                  <c:forEach items="${spectrumdatas}" var="data">
                                                      <c:if test="${data.isStandardSpectrum==0}"><option value="${data.Id}">${data.Id}</option></c:if>
                                                  </c:forEach>
                                              </c:otherwise>
                                          </c:choose>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group-separator"></div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">审核文件 <font color="red">*</font></label>
                                    <div class="col-sm-8">
                                        <input type="file" name="binFile" value="" class="col-sm-8" required/>
                                    </div>
                                </div>
                                <div class="form-group-separator"></div>
                                <div class="form-group col-sm-6 pull-right" >
                                    <button type="submit" class="btn btn-primary" >上传</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--上传文件结束-->

<%-- 尾部内容 --%>
<jsp:include page="/WEB-INF/jsps/template_tail.jsp"/>
<!-- Imported scripts on this page -->
<script src="assets/js/jquery-ui.min.js"></script>
<!--Specific JS for this page-->
<script type="text/javascript">
    // Sample Javascript code for this page
    jQuery(document).ready(function ($) {
        $("#example1").DataTable( {
            "language": {
                "url": "../assets/js/dataTable.zh_CN.json",
            },
            "bPaginage":true
        } );
    	<!--右击菜单开始-->
        /*文件操作*/
        var menufile1 = new BootstrapMenu('.tabletr', {//初始化插件
            //fetchElementData获取元数据
            fetchElementData: function ($rowElem) {
                var data = $rowElem;
                return data;    //return的目的是给下面的onClick传递参数
            },

            /*BootstrapMenu的构造函数第一个参数接收一个字符串格式的元素选择器，第二个参数是一个options参数对象。
             options对象必须至少有一个actions数组，数组中包含右键菜单的action。*/
            actions: [{
                name: '查看',
                onClick: function (obj) {
                    var spectrumId=$(obj).children(":first-child").children(":first-child").attr("value");
                   if(spectrumId!=null) {
                       window.location.href = 'showSpectrumDetail.do?spectrumId=' + spectrumId;
                   }else{
                       alert("您的文件夹中无光谱可以查看");
                   }

                }
            }, {
                name: '分析',
                onClick: function (obj) {
                    window.location.href = 'spectrumAnalyze.jsp?';
                }
            },
                {
                    name: '删除',
                    onClick: function (obj) {
                        var spectrumId=$(obj).children(":first-child").children(":first-child").attr("value");
                        if(spectrumId!=null) {
                            if(!confirm("确认删除")){
                                return false;
                            }
                            $.ajax({
                                url: "deleteSpectrum.do",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    'spectrumId': spectrumId
                                },
                                success: function (data) {
                                    if (undefined != data.successDelete) {
                                        alert(data.successDelete);
                                    }
                                }
                            });
                            obj.remove();
                        }else{
                            alert("您的文件夹中无光谱可以删除");
                        }
                    }
                }, {
                    name: '下载',

                    onClick: function (obj) {
                        var  spectrumID=$(obj).children(":first-child").children(":first-child").attr("value");
                        if(spectrumID!=null){
                               window.location.href = '/downloadSpectrum.do?spectrumID=' + spectrumID;
                        }else{
                            alert("您的当前文件夹物光谱不能操作");
                        }
                    }
                }]
        });
        <!--右击菜单结束-->
    	
        // Sample Select all images
        $("#select-all").on('change', function (ev) {
            var is_checked = $(this).is(':checked');
            $(".mail-table tbody input[type='checkbox']").prop('checked', is_checked).trigger('change');
        });
        // Edit Modal
        $('.gallery-env a[data-action="edit"]').on('click', function (ev) {
            ev.preventDefault();
            $("#gallery-image-modal").modal('show');
        });
        // Delete Modal-1
        $('.gallery-env a[data-action="trash"]').on('click', function (ev) {
            ev.preventDefault();
            $("#gallery-image-delete-modal").modal('show');
        });
        //Delete Modal-2
        $('.gallery-env a[data-action="trash-2"]').on('click', function (ev) {
            ev.preventDefault();
            $("#gallery-image-delete-modal-2").modal('show');
        });

    });

</script>
</body>

</html>